import {Table,Menu,Space,Badge} from 'apusic-ui';
import CommonLayout from '../../components/CommonLayout' ;

const dataSource = [{
  index:1,
  version:"2.2.1",
  status:0 , //0未知 1加载中
  msg:"人员信息发布",
  size:12,
  time:"2022-02-22:12:12:12"
},
{
  index:2,
  version:"2.2.1",
  status:1 , //0未知 1加载中
  msg:"人员信息发布",
  size:12,
  time:"2022-02-22:12:12:12"
},{
  index:3,
  version:"2.2.1",
  status:0 , //0未知 1加载中
  msg:"人员信息发布",
  size:12,
  time:"2022-02-22:12:12:12"
},
{
  index:4,
  version:"2.2.1",
  status:1 , //0未知 1加载中
  msg:"人员信息发布",
  size:12,
  time:"2022-02-22:12:12:12"
}];

const TableDemoPage = () => {
  return (
    <CommonLayout>
      <div
        style={{padding:20}}
      >
        <h3>横向滚动表格</h3>
        <Table
          columns={[
            {
              title:"序号",
              key:"index",
              dataIndex:"index"
            },
            {
              title:"安装包版本",
              key:"version",
              dataIndex:"version"
            },
            {
              title:"部署状态",
              key:"status",
              dataIndex:"status",
              render:(status)=>{
                return (
                  <Badge
                    status={status===1?"processing":"default"}
                    text={status===1?"加载中":"未知"}
                  />
                );
              }
            },
            {
              title:"订阅信息",
              key:"msg",
              dataIndex:"msg"
            },
            {
              title:"文件大小",
              key:"size",
              dataIndex:"size"
            },
            {
              title:"创建时间",
              key:"time",
              dataIndex:"time"
            },
            {
              title:"操作",
              key:"actions",
              fixed:"right",
              width: 100,
              render:(_text,record)=>{
                return (
                  <div>操作</div>
                );
              }
            }
          ]}
          scroll={{x:1000}}
          dataSource={dataSource}
          pagination={false}
          rowSelection={{
            type:"checkbox"
          }}
          rowKey="index"
        />
      </div>
      <div style={{padding:20}}>
        <h3>空状态</h3>
        <Table/>
      </div>
    </CommonLayout>
  );
}

export default TableDemoPage ;